# Callout

The `<Callout>` component used the [Card component](/components/card/) internally, and is used to highlight important content to the users.

If the content you are displaying is **brief**, **important** & requires the user's **immediate attention**, consider using the [Alert component](/components/alert/).

## Import

```jsx
import { Callout } from 'bumbag';
```

## Usage

```jsx-live
<Callout width="600px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Callout>
```

### Overlay

You can use the [Overlay utility](/utilities/overlay) with a Callout to display a modal-like component to the user.

```jsx-live
<Overlay.State>
  <Overlay.Disclosure>Open callout</Overlay.Disclosure>
  <Callout.Overlay title="This is a title">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices
    eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus
    augue sit amet justo.
  </Callout.Overlay>
</Overlay.State>
```

### Title

```jsx-live
<Callout title="Example callout" width="600px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Callout>
```

### Types

```jsx-live
<Stack spacing="major-2">
  <Callout type="info" title="Example info callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout type="danger" title="Example danger callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout type="success" title="Example success callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout type="warning" title="Example warning callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
</Stack>
```

### Footer

```jsx-live
<Callout
  footer={<ActionButtons palette="info" justifyContent="flex-end" />}
  title="Example callout"
  width="600px"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Callout>
```

### Close button

```jsx-live
<Stack spacing="major-2">
  <Callout
    showCloseButton
    onClickClose={() => alert('Closed')}
    title="Example callout"
    width="600px"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout
    showCloseButton
    onClickClose={() => alert('Closed')}
    width="600px"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
</Stack>
```

### Tints

```jsx-live
<Stack spacing="major-2">
  <Callout hasTint type="info" title="Example info callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout hasTint type="danger" title="Example danger callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout hasTint type="success" title="Example success callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout hasTint type="warning" title="Example warning callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
</Stack>
```

### Custom icon

```jsx-live
<Callout
  iconProps={{ icon: 'solid-igloo' }}
  title="Example callout"
  width="600px"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Callout>
```

### Standalone

```jsx-live
<Callout
  title="Example callout"
  width="600px"
  standalone
>
  <Callout.Icon />
  <Box>
    <Callout.Header>
      <Callout.Title>Example callout</Callout.Title>
    </Callout.Header>
    <Callout.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
      cursus id placerat congue, ultrices eget lectus. Duis posuere,
      lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
      consectetur lectus augue sit amet justo.
    </Callout.Content>
    <Callout.Footer>
      <ActionButtons palette="info" justifyContent="flex-end" />
    </Callout.Footer>
  </Box>
</Callout>
```

## Accessibility

#### Patterns

- If a callout has a **title**, then the `aria-labelledby` attribute is set on the component.
- If a callout has a **description**, then the `aria-describedby` attribute is set on the component.

## Props

### Callout Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">title</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

The title of the callout.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">hasTint</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the callout has a tint.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onClickClose</Code>** <Code fontSize="100" palette="primary">(event: MouseEvent&#60;any, MouseEvent&#62;) =&#62; void</Code> 

Function to invoke when the close button is pressed.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">showCloseButton</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if a close button should be visible.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">standalone</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the callout is standalone.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">type</Code>** <Code fontSize="100" palette="primary">&#34;success&#34; | &#34;danger&#34; | &#34;warning&#34; | &#34;info&#34;</Code> 

Type of callout.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">footer</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Footer of the callout.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">closeButtonProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  top?: any;
  right?: any;
  bottom?: any;
  left?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  ... 673 more ...;
  ignoreGrayOverride?: boolean;
}`}
</Code>

Props to spread on the close button.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">iconProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & CSSProperties & LocalBoxProps & LocalIconProps`}
</Code>

Props to spread on the icon.

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Card</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">(string &#38; {}) | &#34;shadowed&#34; | &#34;bordered&#34;</Code> 

Variant of the card.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">headerAddon</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the header addon of the card.

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

## Theming

<Theme component={'Callout'} type="info" footer={<Button>Okay</Button>} showCloseButton title="Example callout" overrides={['Callout.styles.base', 'Callout.Header.styles.base', 'Callout.Title.styles.base', 'Callout.Content.styles.base', 'Callout.Footer.styles.base', 'Callout.Close.styles.base', 'Callout.IconWrapper.styles.base']}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Theme>
